import { FC, useMemo, memo, useRef } from "react";
import Emojy from './emojy.json'
import { changeEmojyFormat } from "@/untils";
import style from './index.module.scss'

const EmojyBox: FC = () => {
    const EmojiDataList = useMemo(() => {
        return changeEmojyFormat(Emojy)
    }, [])
    const containerRef = useRef(null);
    
    return <div className={style['emojiBox']} ref={containerRef}>
        {EmojiDataList.map((item, index) => {
            return <div key={index} className={style['emojyItem']}>
                <div className={style['emojyvalue']}>
                    {item.value}
                </div>
                <div className={style['emojyname']}>
                    {item.name}
                </div>
            </div>
        })}
    </div>

}

export default memo(EmojyBox)